<template>
	<view class="scoreBox" style="background-image: url();">
		<head-navbar title="考试成绩" :bgColor="'rgba(0,0,0,0)'"></head-navbar>
		<view class="boxItem">
			<view class="title mb10 tc">本次成绩</view>
			<view class="testScore">
				<text class="fs80">{{data.score}}</text>
				<text class="fs28 c65d">分</text>
			</view>
			<view class="mtb20">
				<u-line color="#F5F6F9"></u-line>
			</view>
			<view class="flex flex-itemCenter">
				<image class="wh30" src="../../static/totalPoints.png"></image>
				<text class="fs28 mlr20 c9a">总分：{{data.totalScore}}</text>
				<text class="fs28 c65d">合格成绩：{{data.standardScore}}</text>
			</view>
			<view class="icon" style="background-image: url(../../static/qualified.png);">
				<text>{{data.passStatus}}</text>
			</view>
		</view>
		<view class="boxItem">
			<view class="flex flex-end fs28 c65d">
				<view class="flex flex-itemCenter">
					<view class="wh20 radius50 correct mr10"></view>
					<view>正确</view>
				</view>
				<view class="flex flex-itemCenter">
					<view class="wh20 radius50 err mr10 ml40"></view>
					<view>错误</view>
				</view>
			</view>
			<view>
				<view class="title mtb40">一、单项选择题</view>
				<view class="result">
					<view v-for="(item,index) in examResult" :key="index">
						<view :class="item.rightorwrong == '0' ? 'circle err' : 'circle correct'"
							v-if="item.questiontype == '1'">
							{{item.subjectsubsort}}
						</view>
					</view>
				</view>
			</view>
			<view>
				<view class="title mtb40">二、多项选择题</view>
				<view class="result">
					<view v-for="(item,index) in examResult" :key="index">
						<view :class="item.rightorwrong == '0' ? 'circle err' : 'circle correct'"
							v-if="item.questiontype == '2'">
							{{item.subjectsubsort}}
						</view>
					</view>
				</view>
			</view>
			<view>
				<view class="title mtb40">三、判断题</view>
				<view class="result">
					<view v-for="(item,index) in examResult" :key="index">
						<view :class="item.rightorwrong == '0' ? 'circle err' : 'circle correct'"
							v-if="item.questiontype == '3'">
							{{item.subjectsubsort}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: {},
				examResult: []
			}
		},
		onLoad(options) {
			this.data = JSON.parse(options.data)
			this.getExamResult(this.data.id)
		},
		methods: {
			getExamResult(id) {
				let that = this
				that.request(that.$api.examResult + '/' + id, 'GET').then((res) => {
					if (res) {
						that.examResult = res.resultValue
					}
				})
			}
		}
	}
</script>

<style scoped>
	.scoreBox {
		height: 100vh;
		background-repeat: no-repeat;
		background-size: 100%;
		box-sizing: border-box;
		padding-top: calc(var(--status-bar-height) + 44px +28rpx);
		overflow: auto;
	}

	.boxItem {
		position: relative;
		margin: 28rpx;
		background-color: #FFFFFF;
		padding: 30rpx;
		border-radius: 30rpx;
	}

	.title {
		font-size: 28rpx;
		color: #65717D;
	}

	.testScore {
		font-family: PingFangSC-Medium;
		font-weight: Medium;
		color: #00CA69;
		text-align: center;
	}

	.icon {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		background-repeat: no-repeat;
		background-size: 100%;
		width: 160rpx;
		height: 86rpx;
		line-height: 86rpx;
		color: #FFFFFF;
		font-size: 28rpx;
		text-align: center;
	}

	.correct {
		background-color: #2BC8A0;
	}

	.err {
		background-color: #FE5A5A;
	}

	.result {
		display: flex;
		flex-wrap: wrap;
	}

	.circle {
		box-sizing: border-box;
		width: 68rpx;
		height: 68rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 68rpx;
		margin: 0 28rpx 40rpx 28rpx;
		border-radius: 50%;
	}
</style>
